'use strict';
import React, { Component } from 'react';
import { observer, Provider, inject } from 'mobx-react';
import { Button } from 'antd';
import cloneDeep from 'lodash/cloneDeep';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import TestAccount from './TestAccount';

@inject('store')
@observer
export default class SimpleTest extends Component {
	constructor(props) {
		super(props);
		this.initDataCount = 50;
		this.state = { option: this.getInitialState() };
		this.nextData = [];
	}

	componentDidMount() {
		//
	}
	componentDidUpdate() {
		//
	}

	componentWillUnmount() {
		//
	}

	getInitialState = () => {
		return {};
	};

	render() {
		return (
			<div
				style={{
					padding: 5,
					// backgroundColor: 'blue',
					display: 'flex',
					flex: 1,
					flexDirection: 'column',
				}}
			>
				<div
					style={{
						margin: 5,
					}}
				>
					<Button
						type="normal"
						onClick={() => {
							this.props.store.addAccount();
						}}
					>
						加个web号
					</Button>
					<Button
						type="danger"
						onClick={() => {
							this.props.store.addAccount(null, {
								puppet: 'wechaty-puppet-padchat',
								token: 'puppet_padchat_5d91fbd2805c5ccc',
							});
						}}
					>
						加个pad号
					</Button>
				</div>
				<div
					style={{
						margin: 5,
						// backgroundColor: 'red',
						display: 'flex',
						flex: 1,
					}}
				>
					{this.props.store.accounts.map((v, k) => {
						return <TestAccount key={k} index={k} />;
					})}
				</div>
			</div>
		);
	}
}
